<template>
  <div class="my-process-palette">
    <p>Start</p>
    <div class="palette-toolbar">
      <el-collapse>
        <el-collapse-item title="选择功能" name="5">
          <div class="custom-button bpmn-icon-hand-tool" @click="startTool($event, 'handTool')"
               @mousedown="startTool($event, 'handTool')">
            手型工具
          </div>
          <div class="custom-button bpmn-icon-lasso-tool" @click="startTool($event, 'lassoTool')"
               @mousedown="startTool($event, 'lassoTool')">
            框选工具
          </div>
          <div class="custom-button bpmn-icon-connection" @click="startTool($event, 'connectTool')"
               @mousedown="startTool($event, 'connectTool')">
            连线工具
          </div>
        </el-collapse-item>
        <el-collapse-item title="任务" name="1">
          <div class="custom-button bpmn-icon-user-task" @click="createElement($event, 'UserTask')"
               @mousedown="createElement($event, 'UserTask')">
            用户任务
          </div>
          <!--          <div class="custom-button bpmn-icon-send-task" @click="createElement($event, 'SendTask')"-->
          <!--               @mousedown="createElement($event, 'SendTask')">-->
          <!--            发送任务-->
          <!--          </div>-->
          <!--          <div class="custom-button bpmn-icon-receive-task" @click="createElement($event, 'ReceiveTask')"-->
          <!--               @mousedown="createElement($event, 'ReceiveTask')">-->
          <!--            接收任务-->
          <!--          </div>-->
          <!--          <div class="custom-button bpmn-icon-script-task" @click="createElement($event, 'ScriptTask')"-->
          <!--               @mousedown="createElement($event, 'ScriptTask')">-->
          <!--            脚本任务-->
          <!--          </div>-->
          <!--          <div class="custom-button bpmn-icon-service-task" @click="createElement($event, 'ServiceTask')"-->
          <!--               @mousedown="createElement($event, 'ServiceTask')">-->
          <!--            服务任务-->
          <!--          </div>-->
        </el-collapse-item>
        <el-collapse-item title="网关" name="2">
          <div class="custom-button bpmn-icon-gateway-xor" @click="createElement($event, 'ExclusiveGateway')"
               @mousedown="createElement($event, 'ExclusiveGateway')">
            排他网关
          </div>
          <div class="custom-button bpmn-icon-gateway-parallel" @click="createElement($event, 'ExclusiveGateway')"
               @mousedown="createElement($event, 'ExclusiveGateway')">
            并行网关
          </div>
          <div class="custom-button bpmn-icon-gateway-or" @click="createElement($event, 'ParallelGateway')"
               @mousedown="createElement($event, 'ParallelGateway')">
            相容网关
          </div>
          <div class="custom-button bpmn-icon-gateway-eventbased" @click="createElement($event, 'EventBasedGateway')"
               @mousedown="createElement($event, 'EventBasedGateway')">
            事件网关
          </div>
          <div class="custom-button bpmn-icon-gateway-complex" @click="createElement($event, 'ComplexGateway')"
               @mousedown="createElement($event, 'ComplexGateway')">
            复杂网关
          </div>
        </el-collapse-item>
        <el-collapse-item title="事件" name="3">
          <div class="custom-button bpmn-icon-start-event-none" @click="createElement($event, 'StartEvent')"
               @mousedown="createElement($event, 'StartEvent')">
            开始事件
          </div>
          <div class="custom-button bpmn-icon-end-event-none" @click="createElement($event, 'EndEvent')"
               @mousedown="createElement($event, 'EndEvent')">
            结束事件
          </div>
          <!--          <div class="custom-button bpmn-icon-intermediate-event-none"-->
          <!--               @click="createElement($event, 'IntermediateThrowEvent')"-->
          <!--               @mousedown="createElement($event, 'IntermediateThrowEvent')">-->
          <!--            中间事件-->
          <!--          </div>-->
        </el-collapse-item>


      </el-collapse>
    </div>
  </div>
</template>

<script>
import {assign} from "min-dash";

export default {
  name: "startProcessPalette",
  data() {
    return {};
  },
  mounted() {
  },
  methods: {
    createElement(event, type, options = {}) {
      const ElementFactory = window.bpmnInstances.elementFactory;
      const create = window.bpmnInstances.modeler.get("create");
      const shape = ElementFactory.createShape(assign({type: `bpmn:${type}`}, options));
      // if (options) {
      //   shape.businessObject.di.isExpanded = options.isExpanded;
      // }
      create.start(event, shape);
    },
    startTool(event, type) {
      if (type === "handTool") {
        window.bpmnInstances.modeler.get("handTool").activateHand(event);
      }
      if (type === "lassoTool") {
        window.bpmnInstances.modeler.get("lassoTool").activateSelection(event);
      }
      if (type === "connectTool") {
        window.bpmnInstances.modeler.get("globalConnect").toggle(event);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.my-process-palette {
  box-sizing: border-box;
  padding: 8px;

  .palette-toolbar {
    height: calc(100vh - 65px);
    overflow-y: scroll;
  }

  .custom-button {
    box-sizing: border-box;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(24, 144, 255, 0.8);
    cursor: pointer;
    margin-bottom: 8px;

    &:first-child {
      margin-top: 8px;
    }
  }
}
</style>
